@charset "utf-8";
/* 公共头部 */
.topnav {
	width: 100%;
	height: 86px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	background: #848893;
	transition: all 1s;
}
.navactive {
	background: rgba(0, 0, 0, 0.3);
	height: 70px;
}
.topnav > a{
	width: 159px;
	margin-top: 13px;
	margin-left: 10px;
	display: block;
	float: left;
}
.topnav > a > img {
	height: 60px;
	transition: all 1s;
}
.navactive>a>img {
	height: 50px;
}
.topnav .list1 {
	margin-left: 230px;
	margin-right: 140px;
	box-sizing: border-box;
	color: #fff;
	font-size: 16px;
	height: 86px;
}
.topnav .list1>li {
	float: left;
	width: 10%;
	text-align: center;
	line-height: 86px;
	cursor: pointer;
	transition: all 1s;
}
.navactive .list1>li {
	line-height: 70px;
}
.topnav .list1 a{
	color: #fff;
} 
.topnav .list1>li:hover > a, .topnav .list1>li.on > a{
	color: #01b0cd;
}
.topnav .list1>li:hover .inlist {
	height: 50px;
}
.topnav .list1>li:hover .list1back {
	height: 50px;
}
.topnav .list1 .inlist {
	width: 1000px;
	position: relative;
	z-index: 100;
	font-size: 14px;
	transition: all 1s;
	height: 0;
	overflow: hidden;
}
.topnav .list1 .inlist li {
	float: left;
	width: 80px;
	line-height: 50px;
}
.topnav .list1 .inlist a:hover{
	color: #01b0cd;
}
.topnav .list1back {
	height: 0px;
	width: 100%;
	background: rgba(0, 0, 0, 0.49);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); 
	position: fixed;
	top: 86px;
	left: 0;
	transition: all 1s;
}
.navactive .list1back {
	top: 70px;
}
.topnav .right {
	width: 100px;
	margin-right: 10px;
	float: right;
	height: 86px;
	text-align: center;
}
.topnav .rightbox {
	position: relative;
}
.topnav .right .rightbox>a {
	width: 27px;
	height: 27px;
	margin-top: 10px;
	border-radius: 117px;
	position: absolute;
	right: 0;
	top: 19px;
	transition: all 1s;
	border: 1px solid #fff;
	display: block;
}
.navactive .right .rightbox>a {
	top: 10px;
}
.navactive.topnav .right>a {
	height: 70px;
}
.topnav .right>a img {
	cursor: pointer;
}
.topnav .search {
	right: 50px !important;
	height: 27px !important;
	overflow: hidden;
}
.topnav .search img {
	float: right;
}
.topnav .classification {
	height: 40px;
	position: absolute;
	right: -8px;
	top: 30px;
	display: none;
	transition: all 1s;
}
.topnav .classification img {
	transition: all 1s;
}
.topnav .navlist2 {
	width: 50%;
	height: 100%;
	position: fixed;
	background: #313131;
	text-align: center;
	right: -50%;
	z-index: 1000;
	transition: all 1s;
}
.topnav .navlist2 .logo {
	margin-top: 20px;
}
.topnav .navlist2 .logo img{
	height: 50px;
}
.topnav .navlist2 .list2 {
	margin-top: 20px;
}
.topnav .list2>li {
	line-height: 60px;
	width: 100%;
	border-top: 1px solid #222;
	font-size: 28px;
}
.topnav .list2 a{
	color: #fff;
}
.topnav .list2 .inlist {
	color: #fff;
	font-size: 24px;
	line-height: 50px;
	overflow: hidden;
	display: none;
}

.menu{
	height:100%;
	width:68px;
	text-align:center;
	cursor:pointer;
	float:left;
	position:relative;
	margin-top: -5px;
}
.menu .menu-arrow{
	position:absolute;
	top:50%;
	right:50%;
	margin:-15px 0 0 -15px;
	display:block;
	display:none;
	animation:menuline 0.8s ease infinite;
	-webkit-animation:menuline 0.8s ease infinite;
	-moz-animation:menuline 0.8s ease infinite;
	-o-animation:menuline 0.8s ease infinite;
}
.menu .menu-line{
	width:32px;
	height:26px;
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	margin:-13px 0 0 -16px;
}
.menu .menu-line i{
	display:block;
	margin:0 0 3px 0;
	background:#fff;
	height:3px;
	float: right;
}
.menu .menu-line i.ml01{
	width:32px;
	animation:menuline 1s ease infinite;
	-webkit-animation:menuline 1s ease infinite;
	-moz-animation:menuline 1s ease infinite;
	-o-animation:menuline 1s ease infinite;
}
.menu .menu-line i.ml02{
	width:28px;
	animation:menuline2 1s ease infinite 0.2s;
	-webkit-animation:menuline2 1s ease infinite 0.2s;
	-moz-animation:menuline2 1s ease infinite 0.2s;
	-o-animation:menuline2 1s ease infinite 0.2s;
}
.menu .menu-line i.ml02+i.ml02{
	width:28px;
	animation:menuline2 1s ease infinite 0.1s;
	-webkit-animation:menuline2 1s ease infinite 0.1s;
	-moz-animation:menuline2 1s ease infinite 0.1s;
	-o-animation:menuline2 1s ease infinite 0.1s;
}
.menu .menu-line i.ml03{
	width:21px;
	animation:menuline3 1s ease infinite .2s;
	-webkit-animation:menuline3 1s ease infinite .2s;
	-moz-animation:menuline3 1s ease infinite .2s;
	-o-animation:menuline3 1s ease infinite .2s;
}
@keyframes menuline{
	0%{
		width:25px;
	}
	50%{
		width:32px;
	}
	100%{
		width:25px;
	}
}
@-webkit-keyframes menuline{
	0%{
		width:25px;
	}
	50%{
		width:32px;
	}
	100%{
		width:25px;
	}
}
@-moz-keyframes menuline{
	0%{
		width:25px;
	}
	50%{
		width:32px;
	}
	100%{
		width:25px;
	}
}
@-ms-keyframes menuline{
	0%{
		width:25px;
	}
	50%{
		width:32px;
	}
	100%{
		width:25px;
	}
}
@-o-keyframes menuline{
	0%{
		width:25px;
	}
	50%{
		width:32px;
	}
	100%{
		width:25px;
	}
}
@keyframes menuline2{
	0%{
		width:20px;
	}
	50%{
		width:28px;
	}
	100%{
		width:20px;
	}
}
@-webkit-keyframes menuline2{
	0%{
		width:20px;
	}
	50%{
		width:28px;
	}
	100%{
		width:20px;
	}
}
@-moz-keyframes menuline2{
	0%{
		width:20px;
	}
	50%{
		width:28px;
	}
	100%{
		width:20px;
	}
}
@-ms-keyframes menuline2{
	0%{
		width:20px;
	}
	50%{
		width:28px;
	}
	100%{
		width:20px;
	}
}
@-o-keyframes menuline2{
	0%{
		width:20px;
	}
	50%{
		width:28px;
	}
	100%{
		width:20px;
	}
}
@keyframes menuline3{
	0%{
		width:13px;
	}
	50%{
		width:21px;
	}
	100%{
		width:13px;
	}
}
@-webkit-keyframes menuline3{
	0%{
		width:13px;
	}
	50%{
		width:21px;
	}
	100%{
		width:13px;
	}
}
@-moz-keyframes menuline3{
	0%{
		width:13px;
	}
	50%{
		width:21px;
	}
	100%{
		width:13px;
	}
}
@-ms-keyframes menuline3{
	0%{
		width:13px;
	}
	50%{
		width:21px;
	}
	100%{
		width:13px;
	}
}
@-o-keyframes menuline3{
	0%{
		width:13px;
	}
	50%{
		width:21px;
	}
	100%{
		width:13px;
	}
}
@keyframes menuarrow{
	0%{
		transform:translate3d(-15px,0,0);
		-webkit-transform:translate3d(-15px,0,0);
		-moz-transform:translate3d(-15px,0,0);
		-o-transform:translate3d(-15px,0,0);
		-ms-transform:translate3d(-15px,0,0);
	}
	50%{
		transform:translate3d(0px,0,0);
		-webkit-transform:translate3d(0px,0,0);
		-moz-transform:translate3d(0px,0,0);
		-o-transform:translate3d(0px,0,0);
		-ms-transform:translate3d(0px,0,0);
	}
	100%{
		transform:translate3d(15px,0,0);
		-webkit-transform:translate3d(15px,0,0);
		-moz-transform:translate3d(15px,0,0);
		-o-transform:translate3d(15px,0,0);
		-ms-transform:translate3d(15px,0,0);
	}
}
@-webkit-keyframes menuarrow{
	0%{
		transform:translate3d(-15px,0,0);
		-webkit-transform:translate3d(-15px,0,0);
		-moz-transform:translate3d(-15px,0,0);
		-o-transform:translate3d(-15px,0,0);
		-ms-transform:translate3d(-15px,0,0);
	}
	50%{
		transform:translate3d(0px,0,0);
		-webkit-transform:translate3d(0px,0,0);
		-moz-transform:translate3d(0px,0,0);
		-o-transform:translate3d(0px,0,0);
		-ms-transform:translate3d(0px,0,0);
	}
	100%{
		transform:translate3d(15px,0,0);
		-webkit-transform:translate3d(15px,0,0);
		-moz-transform:translate3d(15px,0,0);
		-o-transform:translate3d(15px,0,0);
		-ms-transform:translate3d(15px,0,0);
	}
}
@-moz-keyframes menuarrow{
	0%{
		transform:translate3d(-15px,0,0);
		-webkit-transform:translate3d(-15px,0,0);
		-moz-transform:translate3d(-15px,0,0);
		-o-transform:translate3d(-15px,0,0);
		-ms-transform:translate3d(-15px,0,0);
	}
	50%{
		transform:translate3d(0px,0,0);
		-webkit-transform:translate3d(0px,0,0);
		-moz-transform:translate3d(0px,0,0);
		-o-transform:translate3d(0px,0,0);
		-ms-transform:translate3d(0px,0,0);
	}
	100%{
		transform:translate3d(15px,0,0);
		-webkit-transform:translate3d(15px,0,0);
		-moz-transform:translate3d(15px,0,0);
		-o-transform:translate3d(15px,0,0);
		-ms-transform:translate3d(15px,0,0);
	}
}
@-ms-keyframes menuarrow{
	0%{
		transform:translate3d(-15px,0,0);
		-webkit-transform:translate3d(-15px,0,0);
		-moz-transform:translate3d(-15px,0,0);
		-o-transform:translate3d(-15px,0,0);
		-ms-transform:translate3d(-15px,0,0);
	}
	50%{
		transform:translate3d(0px,0,0);
		-webkit-transform:translate3d(0px,0,0);
		-moz-transform:translate3d(0px,0,0);
		-o-transform:translate3d(0px,0,0);
		-ms-transform:translate3d(0px,0,0);
	}
	100%{
		transform:translate3d(15px,0,0);
		-webkit-transform:translate3d(15px,0,0);
		-moz-transform:translate3d(15px,0,0);
		-o-transform:translate3d(15px,0,0);
		-ms-transform:translate3d(15px,0,0);
	}
}
@-o-keyframes menuarrow{
	0%{
		transform:translate3d(-15px,0,0);
		-webkit-transform:translate3d(-15px,0,0);
		-moz-transform:translate3d(-15px,0,0);
		-o-transform:translate3d(-15px,0,0);
		-ms-transform:translate3d(-15px,0,0);
	}
	50%{
		transform:translate3d(0px,0,0);
		-webkit-transform:translate3d(0px,0,0);
		-moz-transform:translate3d(0px,0,0);
		-o-transform:translate3d(0px,0,0);
		-ms-transform:translate3d(0px,0,0);
	}
	100%{
		transform:translate3d(15px,0,0);
		-webkit-transform:translate3d(15px,0,0);
		-moz-transform:translate3d(15px,0,0);
		-o-transform:translate3d(15px,0,0);
		-ms-transform:translate3d(15px,0,0);
	}
}

/* 公共底部 */
.footer {
	height: 60px;
	width: 100%;
	background: #313131;
	color: #FFF;
	line-height: 60px;
	padding: 0 10px;
	box-sizing: border-box;
	overflow: hidden;
	transition: all 1s;
}
.footer .fullleft {
	text-transform: uppercase;
}
.footer a{
	color: #fff;
}
.bottomnav {
	width: 100%;
	background: #848893;
	position: fixed;
	bottom: 0px;
	left: 0;
	z-index: 100;
	display: none;
}
.bottomnav ul {
	height: 100%;
}
.bottomnav li {
	width: 25%;
	float: left;
	padding: 10px 0;
	height: 80px;
	font-size: 12px;
	text-align: center;
}
.bottomnav li:hover {
	background: #747881;
	margin-left: -1px;
	padding-left: 1px;
}
.bottomnav li img {
	height: 50%;
	width: auto !important;
}
.bottomnav li:hover a {
	border-left: 1px solid #747881;
	border-right: 1px solid #747881;
}
.bottomnav .active {
	background: #747881;
}
.bottomnav .active a {
	border-left: 1px solid #747881;
	border-right: 1px solid #747881;
}
.bottomnav li a {
	width: 100%;
	height: 60px;
	margin-top: 10px;
	display: block;
	border-left: 1px solid #747881;
	border-right: 1px solid #666;
	box-sizing: border-box;
	color: #fff;
}

/* 分页 */
.page{
    margin-top:10px;
    padding:14px 0 15px;
    text-align: center;
}
.page a{
    border:1px solid #CCCCCC;
    margin-right:5px;
    padding:4px 7px;
}
.page span{
    border:1px solid #CCCCCC;
    margin-right:5px;
    padding:4px 7px;
}
.page a.active, .page span.current{
    background:#01b0cd;
    border:1px solid #01b0cd;
    color:#FFFFFF;
    font-weight:bolder;
}